<script setup>
import { computed, inject, onMounted, ref, watch } from 'vue';
import { Modal } from 'ant-design-vue';
import { DeleteOutlined, StarOutlined, StarFilled } from '@ant-design/icons-vue';
import LabelLayer from './label-layer.vue';
import BaseDetails from '@/components/data-label/base-details.vue';
import BaseDataList from '@/components/data-label/base-data-list.vue';
import { VisibleIcon } from '@/util/index.js';

const OpGte = inject('OpGte');
const layers = inject('layers');
const clearLayers = inject('clearLayers');
const setExpectedAutoAppend = inject('setExpectedAutoAppend');
const autoAppendLayersExpected = inject('autoAppendLayersExpected');
const toggleVisibleOfLayers = inject('toggleVisibleOfLayers');
const editingLayer = inject('editingLayer');
const selectedLayers = inject('selectedLayers');
const lastSelectIndex = inject('lastSelectIndex');

const icon = computed(VisibleIcon( () => R.any(R.prop('visible'), layers.value) ));

const layersElem = ref();
onMounted(() => {
  const olElem = layersElem.value.$el.querySelector('ol');

  const overflowBlockEnd = elem => elem.parentElement.offsetHeight + elem.parentElement.scrollTop < elem.offsetHeight + elem.offsetTop;
  const overflowBlockStart = elem => elem.offsetTop < elem.parentElement.scrollTop;

  watch(lastSelectIndex, newVal => {
    const liElem = olElem.children[newVal];
    if (!liElem) { return; }

    if (overflowBlockEnd(liElem)) {
      liElem.scrollIntoView({ block: 'end' });
    } else if (overflowBlockStart(liElem)) {
      liElem.scrollIntoView({ block: 'start' });
    }
  });
});

watch(() => selectedLayers.value.size, newVal => 0 == newVal && (editingLayer.value = null));
</script>

<template>
  <base-details>
    <template #header>
      <span>已标注（{{ layers.length }}）</span>
      <div class="fn">
        <template v-if="OpGte('标注')">
          <a-button
            :disabled="!layers.length"
            @click.prevent.stop="
              () => {
                Modal.confirm({
                  centered: true,
                  content: `确定要清空标注吗？`,
                  onOk: clearLayers,
                });
              }"
            >
            <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
          </a-button>

          <a-button :disabled="!layers.length" @click.prevent.stop="() => setExpectedAutoAppend('all')">
            <template #icon>
              <!-- **当前** 题的标注至少选 1 个作为自动追加的 -->
              <template v-if="0 < autoAppendLayersExpected.size && autoAppendLayersExpected.size == layers.length">
                <star-filled style="color: gold;" />
              </template>
              <template v-else>
                <star-outlined />
              </template>
            </template>
          </a-button>
        </template>

        <a-button :disabled="!layers.length" @click.prevent.stop="() => toggleVisibleOfLayers()">
          <template #icon>
            <component :is="icon" style="color: rgb(26,115,232);"></component>
          </template>
        </a-button>
      </div>
    </template>

    <base-data-list
      ref="layersElem"
      :list="layers"
      @clickself="() => selectedLayers.clear()"
    >
      <template #default="{ item }">
        <label-layer :item="item"></label-layer>
      </template>
    </base-data-list>
  </base-details>
</template>
